$(function () {
    // 需求1: 点击a链接，显示隐藏盒子;
    $("#loginBox a").on('click', function () {
        // 登录盒子隐藏，注册盒子显示
        $("#loginBox").hide();
        $("#regBox").show();
    });
    $("#regBox a").on('click', function () {
        // 登录盒子显示，注册盒子隐藏
        $("#loginBox").show();
        $("#regBox").hide();
    });

    // 需求2:自定义校验规则
    const form = layui.form;
    form.verify({
        username: [
            /^[a-zA-Z0-9]{1,10}$/
            , '用户名必须1到10位数字和字'
        ]
        , pwd: [
            /^[a-zA-Z0-9]{6,12}$/
            , '密码必须6到12位数字和字母'
        ]
        ,
        //注册页面的确认密码规则
        repwd: function (value) {
            // value就是 你给哪个标签添加的这个校验规则
            // 这个标签的值就赋值给value
            let pwd = $('#regBox [name="password"]').val()
            if (pwd !== value) {
                return '两次密码输入不一致'
            }
        }
    })



    // 3.注册功能  监听表单的提交事件
    let layer = layui.layer
    $('#regBox form').on('submit', function (e) {
        //阻止事件的提交行为
        e.preventDefault()
        // jquery中的serialize()收集表单中的具有name属性的值
        // let str = $(this).serialize()
        // console.log(str); //username=jack&password=123456
        //ajax提交数据,form不用提交数据. 好处,页面不会发生跳转
        axios({
            method: 'post',
            url: '/api/reguser',
            data: $(this).serialize()  // 键值对格式   
        }).then(({ data: res }) => {
            //成功回调
            // console.log(res);
            // 判断是否注册成功 
            if (res.status !== 0) {
                return layer.msg(res.message)
            }

            layer.msg('恭喜您,注册用户成功')
            //切换到登录模块
            $('#regBox a').click()
            // 清空表单-dom元素中,有一个reset()可以重置表单
            $('#regBox form')[0].reset()

        })

    })


    //5.登录功能 
    $('#loginBox form').on('submit', function (e) {
        e.preventDefault()

        // 发送ajax请求
        axios({
            url: '/api/login',
            method: 'post',
            data: $(this).serialize()
        }).then(({ data: res }) => {
            //成功回调
            // console.log(res)
            // 判断 如果业务状态码没通过 就不需要往下面继续执行了 
            if (res.status !== 0) {
                //返回 后台返回的登录失败信息
                return layer.msg(res.message)
            }
            //成功后
            layer.msg('恭喜您,登录成功!')

            // 存储用户的token
            localStorage.setItem('token', res.token)
            setTimeout(function () {
                //页面跳转到index.html
                location.href = '/index.html'

            }, 1000)

        });
    })

});